<!-- 服务详情 -->
<template>
	<view class="page-view">
		<u-navbar :border-bottom="false" :custom-back="backBtnHandle" title="需求详情"></u-navbar>
		<view class="bg-white u-p-30">

			<view class="u-font-40 font-medium u-m-b-35">{{demInfo.title}}</view>

			<view class="u-flex  u-border-bottom u-p-b-25"
				@click="$u.route('/pages/subpage/profile/index',{id:demInfo.user_info.uid})">
				<view class="avatar">
					<u-avatar :src="demInfo.user_info&&demInfo.user_info.avatar" size="80"
						:show-level="demInfo.user_info&&demInfo.user_info.is_power==1"
						:level-icon-color="config.mainColor"></u-avatar>
				</view>
				<view class="u-m-l-12 u-flex-1">
					<view class="u-font-26 font-medium" style="color: #033E26;">{{demInfo.user_info&&demInfo.user_info.name}}
					</view>
					<view class="u-tips-color u-font-20">
						<text class="">发布于{{demInfo.add_time}} </text>
						<text class="u-m-l-20">IP: {{demInfo.user_info&&demInfo.user_info.ip}}</text>
					</view>
				</view>
				<button class="u-reset-button" open-type="share" @click.stop="shareHandle">
					<text class="iconfont icon-fenxiang1 u-type-primary" style="font-size: 40rpx;"></text>
				</button>
			</view>

			<view class="u-p-t-20 u-p-b-30 u-font-28">
				<text>{{demInfo.description}}</text>
			</view>
			<view class="u-p-b-20 u-flex u-flex-wrap" v-if="demInfo.image&&demInfo.image.length>0">
				<view v-for="(url,index) in demInfo.image" :key="index" @click="previewImage(index)" class="u-m-r-10 u-m-b-10">
					<u-image :src="url" mode="aspectFill" width="220rpx" height="230rpx" border-radius="10rpx"
						:fade="true"></u-image>
				</view>
			</view>
			<view class=" u-flex u-flex-wrap">
				<!-- <view class="u-m-r-20 u-m-b-24" v-for="(item,index) in tags" :key="index">
					<u-tag :text="item" type="info" border-color="transparent" />
				</view> -->
				<!-- <view class="u-m-r-20 u-m-b-24">
					<u-tag text="手续办理" type="info" border-color="transparent" />
				</view> -->
			</view>
		</view>

		<u-line color="#F6F6F6" margin="0 30rpx"></u-line>
		<view class="u-p-30 u-m-b-30 bg-white">
			<view class="u-font-34 font-medium u-m-b-20">{{demInfo.is_pay?'一口价':'预算'}}</view>
			<view class="dem-price">
				<text class="u-tips-color u-font-28">{{demInfo.is_pay?'一对一服务':'线下帮忙（1对1服务）'}}</text>
				<view class="u-type-error font-medium">￥<text class="u-font-34">{{demInfo.price}}</text></view>
			</view>
			<view class="u-flex">
				<view class="u-light-color u-m-r-30">服务地址</view>
				<view class="u-flex-1 align-right "><text class="iconfont icon-dingwei"></text>{{demInfo.address}}</view>
			</view>
			<u-line color="#F6F6F6" margin="30rpx 0"></u-line>
			<view class="u-flex">
				<view class="u-light-color u-m-r-30">服务时间</view>
				<view class="u-flex-1 align-right ">{{demInfo.serve_time}}</view>
			</view>
		</view>

		<!-- <view class="u-p-30 u-m-b-30 bg-white">
			<view class="u-font-34 font-medium u-m-b-20">交易流程</view>
			<view class="flow-group">
				<view class="u-flex  u-row-between u-m-b-30">
					<view class="flow-item"> 1.把关师申请</view>
					<u-line class="u-line"></u-line>
					<view class="flow-item"> 2.沟通确认</view>
					<u-line class="u-line"></u-line>
					<view class="flow-item"> 3.客户下单</view>
				</view>
				<u-line class="p-u-line" direction="col" length="30rpx"></u-line>
				<view class="u-flex  u-row-between">
					<view class="flow-item"> 6.双方评价</view>
					<u-line class="u-line"></u-line>
					<view class="flow-item"> 5.客户确认</view>
					<u-line class="u-line"></u-line>
					<view class="flow-item"> 4.把关师交付</view>
				</view>
			</view>
		</view> -->

		<view class="bottom-action" v-if="showAction">
			<view class="u-flex">
				<view class="u-type-error font-medium pay-total">￥<text class="u-font-34">{{demInfo.price}}</text></view>
				<u-button type="primary" hover-class="none" shape="circle" plain class="u-m-l-20 u-m-r-20" v-if="demInfo.is_pay==0"
					:custom-style="{backgroundColor:'#fff !important'}" @click="toChat">咨询</u-button>
				<u-button type="primary" hover-class="none" shape="circle" class="u-flex-1" @click="navtoPage">去接单</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				demId: '',
				demInfo: {},
				userInfo: this.$store.state.vuex_userInfo,
				tags: [],
				showAction: false,
				isShare: '',
				config: this.$appConfig
			}
		},
		onLoad(e) {
			this.demId = e.id
			this.userInfo = this.$store.state.vuex_userInfo;
			this.queryDemInfo()
			this.isShare = e.spid
		},
		methods: {
			navtoPage() {
				if (this.userInfo&&this.userInfo.is_real) {
					if (this.demInfo.status == 2) {
						this.$u.route('/pages/subpage/order/action_dem', {
							id: this.demId
						})
					} else if (this.demInfo.status == 0) {
						this.$u.toast('需求已关闭，看看其他需求吧！')
					} else {
						this.$u.toast('手慢了哦，需求已被接单了！')
					}
				} else {
					this.$u.route('/pages/subpage/profile/autonym')
				}
			},
			toChat() {
				if (this.userInfo) {
					this.$u.route('/pages/subpage/message/chat', {
						uid: this.demInfo.uid,
						did: this.demId,
						name: this.demInfo.user_info.name
					})
				} else {
					this.$u.route('/pages/subpage/login/oneBtnLogin')
				}
			},
			queryDemInfo() {
				this.$u.api.demandDetail(this.demId).then(res => {
					this.demInfo = res;
					this.showAction = res.uid !== this.userInfo.uid
					this.tags = res.class_three_name.split(',')
					// #ifdef MP
					this.$u.mpShare.title = `这里有个需求：${res.title}`
					this.$u.mpShare.path = `pages/subpage/list/dem_detail?id=${res.id}&spid=${this.userInfo.uid}`
					// #endif
				}).catch((err) => {
					console.log(err);
					this.$u.toast('需求已下架')
					let pages = getCurrentPages();
					setTimeout(() => {
						if (pages.length > 0) {
							uni.navigateBack()
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}, 1000)
				})
			},
			shareHandle() {
				// #ifdef APP
				this.uniShare({
					path: `pages/subpage/list/dem_detail?id=${this.demInfo.id}&spid=${this.userInfo.uid}`,
					title: `这里有个需求：${this.demInfo.title}`
				})
				// #endif

			},
			// 返回按钮
			backBtnHandle() {
				if (this.isShare) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.demInfo.image,
					current: index
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-view {
		padding-bottom: 170rpx;
	}

	.avatar {
		transform: scale(0.8);
	}

	.divide {
		margin: 0 10rpx;
	}

	.dem-price {
		background-color: #F6F6F6;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		height: 120rpx;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}

	.flow-group {
		position: relative;

		.flow-item {
			width: 180rpx;
			height: 56rpx;
			background: #F6F6F6;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666666;
		}

		.u-line {
			flex: 1;
		}

		.p-u-line {
			position: absolute;
			top: 56rpx;
			right: 90rpx;
		}
	}

	.bottom-action {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #ffffff;
		height: 170rpx;
		padding: 28rpx 30rpx 0 44rpx;

		.pay-total {
			min-width: 200rpx;
		}
	}
</style>